<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试修复后的阅读器</title>
    
    <!-- 样式文件 -->
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/reader.css">
    
    <style>
        .debug-overlay {
            position: fixed;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 12px;
            z-index: 1000;
            max-width: 300px;
        }
        
        .debug-overlay h4 {
            margin: 0 0 5px 0;
            color: #4CAF50;
        }
        
        .debug-item {
            margin: 2px 0;
        }
        
        .status-ok { color: #4CAF50; }
        .status-error { color: #f44336; }
        .status-warning { color: #ff9800; }
    </style>
</head>
<body>
    <div class="debug-overlay" id="debugOverlay">
        <h4>调试信息</h4>
        <div id="debugContent">初始化中...</div>
    </div>

    <!-- 阅读器容器 -->
    <div class="reader-container">
        <!-- 顶部导航栏 -->
        <header class="reader-header" id="readerHeader">
            <button class="nav-btn back-btn" id="backBtn" title="返回主页">
                <span class="icon">←</span>
                <span class="text">返回</span>
            </button>
            <div class="book-info">
                <h1 class="book-title" id="bookTitle">加载中...</h1>
            </div>
            <button class="nav-btn menu-btn" id="menuBtn" title="菜单">
                <span class="icon">⋮</span>
            </button>
        </header>

        <!-- PDF显示区域 -->
        <main class="pdf-viewer" id="pdfViewer">
            <!-- 加载状态 -->
            <div class="pdf-loading" id="pdfLoading">
                <div class="loading-spinner"></div>
                <p class="loading-text">正在加载PDF...</p>
                <div class="loading-progress">
                    <div class="progress-bar">
                        <div class="progress-fill" id="loadingProgress"></div>
                    </div>
                    <span class="progress-text" id="progressText">0%</span>
                </div>
            </div>

            <!-- PDF画布容器 -->
            <div class="pdf-canvas-container" id="pdfCanvasContainer" style="display: none;">
                <canvas class="pdf-canvas" id="pdfCanvas"></canvas>
            </div>

            <!-- 触控区域 -->
            <div class="touch-areas" id="touchAreas" style="display: none;">
                <div class="touch-area touch-left" id="touchLeft" data-action="prevPage"></div>
                <div class="touch-area touch-right" id="touchRight" data-action="nextPage"></div>
            </div>

            <!-- 页面信息显示 -->
            <div class="simple-page-info" id="simplePageInfo">
                <span id="currentPageDisplay">1</span> / <span id="totalPagesDisplay">1</span>
            </div>
        </main>

        <!-- 底部进度条 -->
        <div class="progress-container" id="progressContainer">
            <div class="progress-bar">
                <div class="progress-fill" id="readingProgress"></div>
            </div>
        </div>
    </div>

    <script>
        // 调试工具
        const debugContent = document.getElementById('debugContent');
        
        function updateDebug(message, status = 'info') {
            const div = document.createElement('div');
            div.className = `debug-item status-${status}`;
            div.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
            debugContent.appendChild(div);
            
            // 保持最新的10条消息
            while (debugContent.children.length > 10) {
                debugContent.removeChild(debugContent.firstChild);
            }
        }
        
        // 监听错误
        window.addEventListener('error', (e) => {
            updateDebug(`错误: ${e.message}`, 'error');
        });
        
        // 监听未处理的Promise拒绝
        window.addEventListener('unhandledrejection', (e) => {
            updateDebug(`Promise错误: ${e.reason}`, 'error');
        });
        
        updateDebug('页面开始加载', 'ok');
    </script>

    <!-- JavaScript文件 -->
    <script>
        updateDebug('开始加载Polyfills', 'info');
    </script>
    <script src="assets/js/polyfills.js"></script>
    
    <script>
        updateDebug('开始加载兼容性检测', 'info');
    </script>
    <script src="assets/js/compatibility.js"></script>
    
    <script>
        updateDebug('开始加载错误处理器', 'info');
    </script>
    <script src="assets/js/error-handler.js"></script>
    
    <script>
        updateDebug('开始加载边界处理器', 'info');
    </script>
    <script src="assets/js/boundary-handler.js"></script>
    
    <script>
        updateDebug('开始加载UX增强器', 'info');
    </script>
    <script src="assets/js/ux-enhancer.js"></script>

    <script>
        updateDebug('开始加载PDF.js', 'info');
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script>
        // 配置PDF.js worker
        if (typeof pdfjsLib !== 'undefined') {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
            updateDebug('PDF.js加载成功', 'ok');
        } else {
            updateDebug('PDF.js加载失败', 'error');
        }
    </script>

    <script>
        updateDebug('开始加载Utils', 'info');
    </script>
    <script src="assets/js/utils.js"></script>
    <script>
        if (typeof Utils !== 'undefined') {
            updateDebug('Utils加载成功', 'ok');
        } else {
            updateDebug('Utils加载失败', 'error');
        }
    </script>
    
    <script>
        updateDebug('开始加载Reader', 'info');
    </script>
    <script src="assets/js/reader.js"></script>
    <script>
        if (typeof PDFReaderManager !== 'undefined') {
            updateDebug('PDFReaderManager加载成功', 'ok');
        } else {
            updateDebug('PDFReaderManager加载失败', 'error');
        }
    </script>
    
    <script>
        // 最终检查
        setTimeout(() => {
            updateDebug('开始最终检查', 'info');
            
            const checks = [
                ['Utils', typeof Utils !== 'undefined'],
                ['Utils.dom', typeof Utils !== 'undefined' && Utils.dom],
                ['Utils.dom.$', typeof Utils !== 'undefined' && Utils.dom && typeof Utils.dom.$ === 'function'],
                ['pdfjsLib', typeof pdfjsLib !== 'undefined'],
                ['PDFReaderManager', typeof PDFReaderManager !== 'undefined']
            ];
            
            checks.forEach(([name, condition]) => {
                updateDebug(`${name}: ${condition ? '✓' : '✗'}`, condition ? 'ok' : 'error');
            });
            
            updateDebug('检查完成，等待DOMContentLoaded', 'info');
        }, 200);
    </script>
</body>
</html>
